<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="querySearchInfo">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">溯源：</div>
            <el-select filterable clearable v-model="searchInfo.data">
              <el-option v-for="batchitem in batchList" :key="batchitem.productionBatchId" :label="batchitem.mnecode"
                :value="batchitem" />
            </el-select>
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-slot:content>
      <div class="contentList">
        <div class="childBox">
          <div class="title">
            <div>批次信息</div>
          </div>
          <div class="plate flex">
            <div class="img" style="width: 300px;height: 160px;">
              <img :src="batchInfo.pictureImg" alt="">
            </div>
            <div class="batchInfo">
              <div class="info"> <span class="label">批次编号：</span> {{ batchInfo.mnecode }}</div>
              <div class="info"> <span class="label">养殖品种：</span> {{ batchInfo.varietyName }}</div>
              <div class="info"> <span class="label">码单号：</span> {{ batchInfo.productionBatchCode }}</div>
              <div class="info"> <span class="label">养殖鱼塘：</span> {{ batchInfo.pondName }}</div>
              <div class="info"> <span class="label">养殖周期：</span>
                {{ batchInfo.buildDateTime }}
                {{ batchInfo.buildDateTime && batchInfo.completeDateTime ? '-' : '' }}
                {{ batchInfo.completeDateTime }}</div>
              <div class="info"> <span class="label">批养殖面积：</span> {{ batchInfo.areaStr }}</div>
            </div>
            <div class="qrCode">
              <div class="img">
                <Qrcode></Qrcode>
              </div>
              <div style="padding-top: 20px;color: #469bdf;">扫码溯源</div>
            </div>
          </div>
        </div>
        <div class="childBox">
          <div class="title">
            <div>主体信息</div>
          </div>
          <div class="plate plate_zt">
            <div class="info_zt">
              <div class="info"> <span class="label">主体名称：</span>{{ homeBaseName }}</div>
              <div class="info"> <span class="label">养殖地址：</span> {{ baseBasic.address }}</div>
              <div class="info"> <span class="label">主体负责人：</span> {{ baseBasic.principal }}</div>
            </div>
            <div class="info_zt">
              <div class="info flex" style="width: 100%; margin: 0;">
                <span class="label">主体资质：</span>
                <div class="imglList flex">
                  <template v-if="baseBasicImgList.length > 5">
                    <div class="toLeftRightBtn left" @click="changeList">
                      <i class="el-icon-caret-left"></i>
                    </div>
                    <div class="toLeftRightBtn right">
                      <i class="el-icon-caret-right"></i>
                    </div>
                  </template>
                  <div class="img" v-for="imgUrl, index in baseBasicImgList" :key="index">
                    <img :src="imgUrl" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="childBox">
          <div class="title">
            <div>种苗信息</div>
          </div>
          <div class="plate plate_zm">
            <div class="info_zt">
              <div class="info"> <span class="label">种苗名称：</span> {{ batchInfo.varietyName }}</div>
              <div class="info"> <span class="label">投入数量：</span> {{ fryObj.inputNum + '尾' }}</div>
              <div class="info"> <span class="label">投入总重量：</span> {{ fryObj.inputWeight + '斤' }}</div>
              <!-- <div class="info"> <span class="label">供应商：</span> xxxxxx</div>
              <div class="info"> <span class="label">供应商负责人：</span> xxxxxx</div>
              <div class="info"> <span class="label">供应商联系电话：</span> xxxxxx</div> -->
            </div>
          </div>
        </div>
        <div class="childBox">
          <div class="title">
            <div>农资信息</div>
          </div>
          <div class="plate plate_zm">
            <div class="info_zt" v-for="info, index in materialRecordInfo" :key="index">
              <div class="info"> <span class="label">农资名称：</span> {{ info.materialName }}</div>
              <div class="info"> <span class="label">投入数量：</span> {{ info.inputBasicUnitNum + info.basicUnit }}</div>
              <div class="info"> <span class="label">投入总重量：</span> {{ info.inputAuxiliaryUnitNum + info.auxiliaryUnit }}
              </div>
              <!-- <div class="info"> <span class="label">供应商：</span> xxxxxx</div>
              <div class="info"> <span class="label">供应商负责人：</span> xxxxxx</div>
              <div class="info"> <span class="label">供应商联系电话：</span> xxxxxx</div> -->
            </div>
          </div>
        </div>
        <div class="childBox">
          <div class="title">
            <div>转塘信息</div>
          </div>
          <div class="plate plate_zm">
            <div class="info_zt" v-for="info, index in transferSeparatePondInfo" :key="index">
              <template v-if="info.inFlag">
                <div class="info"> <span class="label"> 原先批次：</span> {{ productionBatchCode }}</div>
                <div class="info"> <span class="label"> 目标批次：</span> {{ info.batchName }}</div>
                <div class="info"> <span class="label">转出数量：</span> {{ info.num }}</div>
                <div class="info"> <span class="label">转出总重量：</span> {{ info.weight }}</div>
                <div class="info"> <span class="label">转出人：</span> {{ info.staffName }}</div>
                <div class="info"> <span class="label">转塘日期：</span> {{ info.transferSeparateDate }}</div>
              </template>
              <template v-else>
                <div class="info"> <span class="label"> 原先批次：</span> {{ info.batchName }}</div>
                <div class="info"> <span class="label"> 目标批次：</span> {{ productionBatchCode }}</div>
                <div class="info"> <span class="label">转入数量：</span> {{ info.num }}</div>
                <div class="info"> <span class="label">转入总重量：</span> {{ info.weight }}</div>
                <div class="info"> <span class="label">转入人：</span> {{ info.staffName }}</div>
                <div class="info"> <span class="label">转塘日期：</span> {{ info.transferSeparateDate }}</div>
              </template>
            </div>
          </div>
        </div>
        <div class="childBox">
          <div class="title">
            <div>出入鱼信息</div>
          </div>
          <div class="plate plate_zm">
            <div class="fishInfo">
              <div class="fishData">初始鱼均重：{{ submitProduceInfo.inputAvgWeight ? submitProduceInfo.inputAvgWeight : '0' +
                '斤'
              }}</div>
              <div class="fishData">产出鱼均重：{{ submitProduceInfo.produceAvgWeight ? submitProduceInfo.produceAvgWeight : '0'
                +
                '斤' }}</div>
              <div class="fishData">初始鱼数量：{{ submitProduceInfo.inputNum ? submitProduceInfo.inputNum : '0' + '尾' }}</div>
              <div class="fishData">产出鱼数量：{{ submitProduceInfo.produceNum ? submitProduceInfo.produceNum : '0' + '斤' }}
              </div>
              <div class="fishData">直鱼数量：{{ submitProduceInfo.deadNum ? submitProduceInfo.deadNum : '0' + '尾' }}</div>
              <div class="fishData">次鱼数量：{{ submitProduceInfo.secondaryNum ? submitProduceInfo.secondaryNum : '0' + '尾' }}
              </div>
            </div>
            <div class="info_zt">
              <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" v-if="productInfoList.lenght">
                <li v-for="i in count" class="info flex" :key="i">
                  <div class="info"> <span class="">{{ i + '.' }}</span> </div>
                  <div class="info"> <span class="label">出鱼类型：</span> {{ productInfoList[i].fishType }}</div>
                  <div class="info"> <span class="label">出鱼数量：</span> {{ productInfoList[i].num }}</div>
                  <div class="info"> <span class="label">出鱼规格：</span> {{ productInfoList[i].spec }}</div>
                  <div class="info"> <span class="label">出鱼重量：</span> {{ productInfoList[i].weight }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="childBox childBox_jd" v-for="info, index in stageInfoList" :key="index">
          <div class="title">
            <div class="titleName">{{ info.stageName }}</div><span> {{ `(${info.startDate}-${info.endDate})` }}</span>
            <span style="padding-left:60px;cursor: pointer;" @click="getAllStageInfo(info, index)">展开</span>
          </div>
          <div class="stage" v-show="isSendRequest[index].flag">
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">检验报告</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo">
                <template>
                  <el-table :data="info.checkInfo.tableData" border stripe style="width: 100%">
                    <!-- <el-table-column prop="index" label="序号" width="50">
                    </el-table-column> -->
                    <el-table-column prop="checkName" label="检验阶段">
                    </el-table-column>
                    <el-table-column prop="uploadDateTime" label="检验日期">
                    </el-table-column>
                    <el-table-column prop="remark" label="检验说明">
                    </el-table-column>
                    <el-table-column label="是否正常" slot-scope="scope">
                      <template>
                        <span>{{ scope.row && scope.row.whetherNormal ? '正常' : '异常' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                    @click="queryCheckInfo(info, index)">查询更多</el-button>
                </template>
              </div>
            </div>
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">环境数据</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo flex">
                <div class="weatherData" style="padding:0 20px">
                  <el-button type="primary" plain v-for="(data) in info.environmentInfo" :key="data.dataItemName"
                    @click="getLineEchats(data, index)">{{
                      data.dataItemName
                    }}</el-button>
                </div>
                <div class="eCharts">
                  <div :id="'lineChart' + index" style="height: 300px;"></div>
                </div>
              </div>
            </div>
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">作业数据</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo">
                <div style="padding: 10px 15px;">
                  <el-button type="primary" plain @click="queryHangNetWorkInfo(info, index)">吊网作业</el-button>
                  <el-button type="primary" plain @click="queryExposedNetWorkInfo(info, index)">露网作业</el-button>
                  <el-button type="primary" plain @click="queryFeedWorkInfo(info, index)">投喂作业</el-button>
                </div>
                <div class="table">
                  <template v-if="info.operationFlag == '1' && info.hangNetWorkInfo['tableData']">
                    <el-table :data="info.hangNetWorkInfo['tableData']" border stripe style="width: 100%">
                      <el-table-column prop="index" label="序号" width="50">
                      </el-table-column>
                      <el-table-column prop="staffName" label="作业人">
                      </el-table-column>
                      <el-table-column prop="season" label="季节">
                      </el-table-column>
                      <el-table-column prop="position" label="位置">
                      </el-table-column>
                      <el-table-column prop="workBeginTime" label="作业开始时间">
                      </el-table-column>
                    </el-table>
                    <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                      @click="queryHangNetWorkInfo(info, index)">查询更多</el-button>
                  </template>
                  <template v-if="info.operationFlag == '2' && info.exposedNetWorkInfo['tableData']">
                    <el-table :data="info.exposedNetWorkInfo['tableData']" border stripe style="width: 100%">
                      <el-table-column prop="index" label="序号" width="50">
                      </el-table-column>
                      <el-table-column prop="staffName" label="作业人">
                      </el-table-column>
                      <el-table-column prop="season" label="季节">
                      </el-table-column>
                      <el-table-column prop="position" label="位置">
                      </el-table-column>
                      <el-table-column prop="workBeginTime" label="作业开始时间">
                      </el-table-column>
                    </el-table>
                    <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                      @click="queryExposedNetWorkInfo(info, index)">查询更多</el-button>
                  </template>
                  <template v-if="info.operationFlag == '3' && info.feedWorkInfo['tableData']">
                    <el-table :data="info.feedWorkInfo['tableData']" border stripe style="width: 100%">
                      <el-table-column prop="index" label="序号" width="50">
                      </el-table-column>
                      <el-table-column prop="materialName" label="投喂物料名称">
                      </el-table-column>
                      <el-table-column prop="num" label="投喂量">
                      </el-table-column>
                      <el-table-column prop="staffName" label="投喂人">
                      </el-table-column>
                      <el-table-column prop="workDateTime" label="投喂时间">
                      </el-table-column>
                    </el-table>
                    <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                      @click="queryFeedWorkInfo(info, index)">查询更多</el-button>
                  </template>
                </div>
              </div>
            </div>
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">农资数据</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo flex" v-if="info.materialRecordInfoByStage.length">
                <div class="inputGoods" v-for="dueg, index in info.materialRecordInfoByStage" :key="index">
                  <div class="info">{{ dueg.materialName }}</div>
                  <div class="Goodsline" />
                  <div class="info" style="color: #666666;">{{ dueg.inputBasicUnitNum }}{{ dueg.basicUnit }}</div>
                </div>
              </div>
            </div>
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">防治数据</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo">
                <div style="margin: 10px 15px;padding-left: 15px; border-left: 3px solid #469bdf;">
                  <span style="color: #666666;">累计防治次数：</span>
                  <span style="color: #469bdf;">{{ info.epidemicPreventionInfo.num }}</span>
                </div>
                <div class="table" style="padding: 0 20px;">
                  <template>
                    <el-table :data="info.epidemicPreventionInfo['tableData']" border stripe style="width: 100%">
                      <el-table-column prop="index" label="序号" width="50">
                      </el-table-column>
                      <el-table-column prop="typeStr" label="防治类型">
                      </el-table-column>
                      <el-table-column prop="staffName" label="防治人">
                      </el-table-column>
                      <el-table-column prop="diseaseName" label="疾病名称">
                      </el-table-column>
                      <el-table-column prop="operationTime" label="防治时间">
                      </el-table-column>
                    </el-table>
                    <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                      @click="queryEpidemicPreventionInfo(info, index)">查询更多</el-button>
                  </template>
                </div>
              </div>
            </div>

            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">治疗数据</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo">
                <div style="margin: 10px 15px;padding-left: 15px; border-left: 3px solid #469bdf;">
                  <span style="color: #666666;">累计治疗次数：</span>
                  <span style="color: #469bdf;">{{ info.diseaseRecord.num }}</span>
                </div>
                <div class="table" style="padding: 0 20px;">
                  <template>
                    <el-table :data="info.diseaseRecord['tableData']" border stripe style="width: 100%">
                      <el-table-column prop="index" label="序号" width="50">
                      </el-table-column>
                      <el-table-column prop="diseaseName" label="疾病名称">
                      </el-table-column>
                      <el-table-column prop="happenTime" label="发生时间">
                      </el-table-column>
                      <el-table-column prop="num" label="患病鱼数量">
                      </el-table-column>
                      <el-table-column prop="materialListStr" label="使用的药物">
                      </el-table-column>
                    </el-table>
                    <el-button style="width:100%;margin-top:5px" size="mini" type="primary" plain
                      @click="queryDiseaseRecord(info, index)">查询更多</el-button>
                  </template>
                </div>
              </div>
            </div>
            <div class="stageItem">
              <div class="stageTitle flex">
                <div class="label">疾病统计</div>
                <div class="line"></div>
              </div>
              <div class="stageInfo">
                <div class="eCharts" style="padding: 0 20px ;width: 100%;">
                  <div :id="'barChart' + index" style="height: 300px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
//阶段
import traceabilityMsgApi from "@/api/traceability/basicsInfo/traceabilityMsg";
//主体
import subjectInfoApi from "@/api/traceability/basicsInfo/subjectInfo";
//溯源基本信息Api
import traceabilitySystem from "@/api/traceability/traceabilitySystem";
import Qrcode from "@/components/qrcode";

import DocumentApi from "@/api/document";
import { blobToBase64 } from "@/utils/convert";


import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";
export default {
  name: "StaffManage",
  components: {
    Pagination,
    BaseMainSlot,
    Qrcode
  },
  mixins: [mymixin],
  data () {
    return {
      searchInfo: {},
      batchList: [],
      eChartsIndex: '1',
      count: 0,//出入任务滚动条初始值
      loading1: false,//出入任务滚动条loading
      homeBaseName: sessionStorage.getItem('homeBaseName'),
      productionBatchCode: "批次123465",
      productionBatchId: 28,
      batchInfo: {},//批次信息
      baseBasicImgList: [],//主体资质图片
      baseBasic: {}, //主体资质
      fryObj: {},//鱼苗
      materialRecordInfo: [],//农资信息
      transferSeparatePondInfo: [],//转分塘
      submitProduceInfo: {},//出鱼任务
      productInfoList: [],//出鱼记录
      stageInfoList: [], //阶段查询
      isSendRequest: {},
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  watch: {},
  created () {
  },
  mounted () {
    this.initData()
  },
  methods: {
    //初始化
    async initData () {
      let routerParams = this.$route.query
      if (routerParams.productionBatchCode && routerParams.productionBatchId) {
        this.productionBatchCode = this.$route.query.productionBatchCode
        this.productionBatchId = this.$route.query.productionBatchId
      } else {
        await this.querAllTraceabilityInfo()
      }
      this.querTraceabilityInfo()
    },
    handleChange () {
      this.activeName ? this.activeName = '1' : his.activeName = ''
    },
    querySearchInfo () {
      console.log(this.searchInfo)
    },
    load () {
      if (this.count >= this.productInfoList.length) {
        this.count == this.productInfoList.length
      } else {
        this.count += 1
      }
    },
    getLineEchats (data, index) {
      const myChart = this.$echarts.init(document.getElementById('lineChart' + index))
      let xAxis = []
      let series = []
      data.innerDataList.forEach(item => {
        xAxis.push(item.date)
        series.push(item.value)
      })
      myChart.setOption({
        tooltip: {},
        legend: {
          data: [data.dataItemName]
        },
        xAxis: {
          data: xAxis
        },
        yAxis: {},
        series: [{
          name: data.dataItemName,
          type: 'line',
          data: series
        }]
      })
    },
    getBarEchats (data, index) {
      data = [
        {
          date: "2023/5/22",
          list: [
            {
              diseaseName: "感冒",
              num: 10
            },
            {
              diseaseName: "发烧",
              num: 19
            }
          ]
        },
        {
          date: "2023/5/12",
          list: [
            {
              diseaseName: "发烧1",
              num: 10
            },
            {
              diseaseName: "咳嗽",
              num: 3
            }
          ]
        }
      ]
      const myChart = this.$echarts.init(document.getElementById('barChart' + index))
      let dataArr = []
      let date = []; //x轴日期
      let lenged = []; //series的个数
      let series = [];
      data.forEach(item => {
        item.list.forEach(item1 => {
          dataArr.push({
            '日期': item.date,
            '疾病名称': item1.diseaseName,
            '患病数量': item1.num
          })
        })
      })
      dataArr.map((item) => {
        date.push(item["日期"]);
        lenged.push(item["疾病名称"]);
      });

      console.log(dataArr, '-----')
      date = [...new Set(date)]; //去重
      lenged = [...new Set(lenged)];
      lenged.map((item) => { //生成  series
        let obj = {
          name: item,
          type: "bar",
          stack: "As",
          emphasis: {
            focus: 'series'
          },
          data: []
        };
        series.push(obj);
      });
      dataArr.map((item) => {//对series 的dataArr进行处理
        series.map((item1) => {
          console.log(item1.name == item["疾病名称"] && date.indexOf(item["日期"]) > -1)
          if (item1.name == item["疾病名称"] && date.indexOf(item["日期"]) > -1) {
            item1.data[date.indexOf(item["日期"])] = item["患病数量"]
          };
        })
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: date
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: series
      };
      myChart.setOption(option);
    },
    changeList () {
      let nArr = this.baseBasicImgList.splice(0, 5)
      this.baseBasicImgList.push(nArr)
    },
    //查询溯源信息列表
    querTraceabilityInfo () {
      //批次信息 batchInfo
      this.queryPageList()
      //主体信息
      this.queryByHomeBaseId()
      //种苗信息
      this.queryInputPondInfo()
      //农资信息
      this.queryMaterialRecordInfo()
      //转分塘
      this.queryTransferSeparatePondInfo()
      //出入鱼信息
      this.queryStageInfo()
      //阶段
      this.querySubmitProduceInfo()
    },
    //查询溯源信息列表
    querAllTraceabilityInfo () {
      traceabilityMsgApi.queryPageByCondition({
        page: 1,
        size: 1000,
      }).then(async res => {
        if (res.success === true) {
          this.batchList = res.data.content
          if (this.batchList.lenght) {
            this.productionBatchCode = this.batchList[0].productionBatchCode
            this.productionBatchId = this.batchList[0].productionBatchId
          }
        } else {
          this.batchList = []
        }
      });
    },
    //查询溯源信息列表
    queryPageList () {
      let params = {
        page: 1,
        size: 1,
        entity: {
          productionBatchCode: this.productionBatchCode
        }
      };
      traceabilityMsgApi.queryPageByCondition(params).then(async res => {
        if (res.success === true && res.data.content[0]) {
          console.log(res.data.content, '----')
          if (this.batchInfo) {
            this.batchInfo['pictureImg'] = this.$baseurl.webServiceUrl + 'base/files/preview?fileId=' + res.data.content[0].pictureId
          } else {
            this.batchInfo['pictureImg'] = require("@/assets/fish.jpg")
          }
          this.batchInfo = { ...this.batchInfo, ...res.data.content[0] }
          console.log(this.batchInfo, '批次')
        } else {
          this.batchInfo = {}
        }
        this.routerParams = {}
      });
    },
    //查询主体信息
    queryByHomeBaseId () {
      subjectInfoApi.queryByHomeBaseId({
        homeBaseId: sessionStorage.getItem('homeBaseId')
      }).then(res => {
        if (res && res.data) {
          this.baseBasic = res.data
          this.baseBasicImgList = []
          if (res.data.pictureIdList.length > 0) {
            res.data.pictureIdList.forEach(async imgId => {
              let imgUrl = await this.fileDownload(imgId)
              this.baseBasicImgList.push(imgUrl)
            })
          }
          console.log(this.baseBasic, '主体信息')
          console.log(this.baseBasicImgList, '主体图片')
        }
      })
    },
    //种苗信息
    queryInputPondInfo () {
      traceabilitySystem.queryInputPondInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('种苗信息', res.data)
        if (res.success) {
          this.fryObj = res.data
        } else {
          this.fryObj = {}
        }
      })
    },
    //农资信息
    queryMaterialRecordInfo () {
      traceabilitySystem.queryMaterialRecordInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('农资信息', res.data)
        if (res.success) {
          this.materialRecordInfo = res.data
        } else {
          this.materialRecordInfo = []
        }
      })
    },
    //转分塘
    queryTransferSeparatePondInfo () {
      traceabilitySystem.queryTransferSeparatePondInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('转分塘', res.data)
        if (res.success) {
          this.transferSeparatePondInfo = res.data
        } else {
          this.transferSeparatePondInfo = []
        }
      })
    },
    //出鱼
    querySubmitProduceInfo () {
      traceabilitySystem.querySubmitProduceInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('出鱼信息', res.data)
        if (res.success) {
          this.submitProduceInfo = res.data
        } else {
          this.submitProduceInfo = {}
        }
      })
    },
    //出鱼任务记录
    queryProductInfo () {
      traceabilitySystem.queryProductInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('出鱼信息', res.data)
        if (res.success) {
          this.productInfoList = res.data
        } else {
          this.productInfoList = []
        }
      })
    },
    //查询阶段信息
    queryStageInfo () {
      traceabilitySystem.queryStageInfo({ batchId: this.productionBatchId }).then(res => {
        console.log('阶段查询', res.data)
        if (res.success) {
          res.data.forEach((stageInfo, index) => {
            stageInfo['checkInfo'] = { tableData: [], page: 1 }
            stageInfo['hangNetWorkInfo'] = { tableData: [], page: 1 }
            stageInfo['feedWorkInfo'] = { tableData: [], page: 1 }
            stageInfo['exposedNetWorkInfo'] = { tableData: [], page: 1 }
            stageInfo['epidemicPreventionInfo'] = { tableData: [], page: 1, num: 0 }
            stageInfo['diseaseRecord'] = { tableData: [], page: 1, num: 0 }
            stageInfo['materialRecordInfoByStage'] = []
            stageInfo['diseaseCount'] = []
            stageInfo['environmentInfo'] = []
            stageInfo['operationFlag'] = '1'
            stageInfo['isShow'] = false
            this.isSendRequest[index] = {
              isShowContent: false,
              flag: false
            }
          })
          this.stageInfoList = res.data
          // this.getAllStageInfo(res.data[0])
        } else {
          this.stageInfoList = []
        }
      })
    },
    //获取选中阶段的信息
    getAllStageInfo (stageInfo, index) {
      if (!this.isSendRequest[index].isShowContent) {
        this.queryExposedNetWorkInfo(stageInfo, index);
        this.queryFeedWorkInfo(stageInfo, index);
        this.queryHangNetWorkInfo(stageInfo, index);
        this.queryCheckInfo(stageInfo, index);
        this.queryEpidemicPreventionInfo(stageInfo, index);
        this.queryDiseaseRecord(stageInfo, index);
        this.queryMaterialRecordInfoByStage(stageInfo, index);
        this.queryEnvironmentInfo(stageInfo, index);
        this.queryDiseaseCount(stageInfo, index)
        this.isSendRequest[index].isShowContent = true
      }
      this.isSendRequest[index].flag = !this.isSendRequest[index].flag
    },
    //漏网作业
    queryExposedNetWorkInfo (info, index) {
      let initPage = info['exposedNetWorkInfo'] && info['exposedNetWorkInfo'].page ? info['exposedNetWorkInfo'].page : 1
      traceabilitySystem.queryExposedNetWorkInfo({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        this.$set(this.stageInfoList[index], 'exposedNetWorkInfo', {
          tableData: res.data.content,
          page: initPage
        })
        this.$set(this.stageInfoList[index], 'operationFlag', '2')
        console.log('漏网作业', res.data, this.stageInfoList)
      })
    },
    //投喂作业
    queryFeedWorkInfo (info, index) {
      let initPage = info['feedWorkInfo'] && info['feedWorkInfo'].page ? info['feedWorkInfo'].page : 1
      traceabilitySystem.queryFeedWorkInfo({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        this.$set(this.stageInfoList[index], 'feedWorkInfo', {
          tableData: res.data.content,
          page: initPage
        })
        this.$set(this.stageInfoList[index], 'operationFlag', '3')
        console.log('投喂作业', res.data, this.stageInfoList)
      })
    },
    //吊网记录 
    queryHangNetWorkInfo (info, index) {
      let initPage = info['hangNetWorkInfo'] && info['hangNetWorkInfo'].page ? info['hangNetWorkInfo'].page : 1
      traceabilitySystem.queryHangNetWorkInfo({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        this.$set(this.stageInfoList[index], 'hangNetWorkInfo', {
          tableData: res.data.content,
          page: initPage
        }),
          this.$set(this.stageInfoList[index], 'operationFlag', '1')
        console.log('吊网记录', res.data, this.stageInfoList)
      })
    },
    //检验报告分页查询
    queryCheckInfo (info, index) {
      let initPage = info['checkInfo'] && info['checkInfo'].page ? info['checkInfo'].page : 1
      traceabilitySystem.queryCheckInfo({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        info['checkInfo'] = {
          tableData: res.data.content,
          page: initPage
        }
        this.stageInfoList[index].isShow = true
        console.log('检验报告', res.data, this.stageInfoList)
      })
    },
    //防治数据
    queryEpidemicPreventionInfo (info, index) {
      let initPage = info['epidemicPreventionInfo'] && info['epidemicPreventionInfo'].page ? info['epidemicPreventionInfo'].page : 1
      traceabilitySystem.queryEpidemicPreventionInfo({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        this.$set(this.stageInfoList[index], 'epidemicPreventionInfo', {
          tableData: res.data.content,
          page: initPage,
          num: res.data.totalElements
        }),
          console.log('防治', res.data, this.stageInfoList)
      })
    },
    //治疗数据
    queryDiseaseRecord (info, index) {
      let initPage = info['diseaseRecord'] && info['diseaseRecord'].page ? info['diseaseRecord'].page : 1
      traceabilitySystem.queryDiseaseRecord({
        entity: {
          batchId: this.productionBatchId,
          endDate: info.endDate, startDate: info.startDate
        },
        page: 1,
        size: 10 * initPage,
      }).then(res => {
        initPage++
        this.$set(this.stageInfoList[index], 'diseaseRecord', {
          tableData: res.data.content,
          page: initPage,
          num: res.data.totalElements
        }),
          console.log('治疗', res.data, this.stageInfoList)
      })
    },
    //农资投入
    queryMaterialRecordInfoByStage (info, index) {
      traceabilitySystem.queryMaterialRecordInfoByStage({
        batchId: this.productionBatchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'materialRecordInfoByStage', res.data),
          console.log('农资投入', res.data, this.stageInfoList)
      })
    },
    //获取环境参数
    queryEnvironmentInfo (info, index) {
      traceabilitySystem.queryEnvironmentInfo({
        batchId: this.productionBatchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'environmentInfo', res.data)
        res.data.length > 0 && this.getLineEchats(res.data[0], index)
        console.log('环境数据', res.data, this.stageInfoList)
      })
    },
    //疾病数据
    queryDiseaseCount (info, index) {
      traceabilitySystem.queryDiseaseCount({
        batchId: this.productionBatchId,
        endDate: info.endDate,
        startDate: info.startDate
      }).then(res => {
        this.$set(this.stageInfoList[index], 'diseaseCount', res.data)
        console.log('疾病数据', res.data, this.stageInfoList)
        this.getBarEchats(res.data, index)
      })
    },
    // queryDiseaseCount
    async fileDownload (fileId) {
      let res = fileId && await DocumentApi.fileDownload({ fileId })
      let img = await blobToBase64(res.data)
      return img
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap
}

.contentList {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .childBox {
    margin: 10px;
    box-shadow: 0px 0px 6px 0px #2080ed;
    border-radius: 4px;
    background: #ffffff;

    .title {
      padding: 10px 0;

      div {
        width: 120px;
        line-height: 30px;
        padding-left: 10px;
        background: #2080ed;
        border-radius: 0 6px 6px 0;
        color: #ffffff;
        font-size: 16px;
      }
    }

    .plate {
      padding: 25px;
      position: relative;

      .qrCode {
        position: absolute;
        top: -50px;
        right: 30px;
        width: 160px;
        height: calc(100% + 50px);
        padding-top: 40px;
        box-sizing: border-box;
        background: #d7eaff;
        text-align: center;

        .img {
          width: 120px;
          height: 120px;
          background: #00718a;
          border-radius: 6px;
          margin: 0 auto;

          img {
            width: 120px;
            height: 120px;
          }
        }
      }

      .img {
        // width: 300px;
        // height: 160px;
        border-radius: 6px;
        background: #e6e6e6;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .batchInfo {
        width: 600px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 20px 40px;
        box-sizing: border-box;


        .info {
          width: 50%;
          color: #999999;
          font-size: 16px;
          padding: 5px 0;
          text-align: left;

          .label {
            color: #333333;
            border-left: 3px solid #2080ed;
            padding-left: 10px;
          }
        }
      }
    }

    .plate_zt,
    .plate_zm {
      .fishInfo {
        display: flex;
        justify-content: flex-start;

        .fishData {
          padding: 10px 30px;
          font-size: 16px;
          color: #2080ed;
          background: #edf7ff;
          border-radius: 4px;
          margin: 5px 10px;
        }
      }

      .info_zt {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;


        .info {
          color: #999999;
          font-size: 16px;
          padding: 5px 0;
          margin-right: 40px;
          margin-bottom: 10px;
          text-align: left;

          .imglList {
            width: calc(100% - 100px);
            position: relative;

            .toLeftRightBtn {
              position: absolute;
              top: 50px;
              width: 50px;
              height: 50px;
              border: 1px solid #2080ed;
              background: #77b6ff;
              border-radius: 25px;
              color: #1383e4;
              line-height: 48px;
              text-align: center;
              font-size: 24px;
            }

            .left {
              left: -20px;
            }

            .right {
              right: -20px;
            }

            .img {
              width: calc(20% - 20px);
              margin: 0 10px;

              img {
                width: 100% !important;
                height: 100% !important;
              }
            }
          }

          .label {
            color: #333333;
            border-left: 3px solid #2080ed;
            padding-left: 10px;
            height: 21px;
          }
        }
      }
    }
  }

  .childBox_jd {
    .title {
      width: 100%;
      background: #ffffff;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .titleName {

        width: 120px;
        background: #2080ed;
        margin-right: 20px;
      }
    }

    .stage {
      width: 100%;

      .stageItem {
        width: 100%;

        .stageTitle {
          height: 30px;
          border-left: 5px solid #93c7fc;
          align-content: center;

          .label {
            margin-left: 2px;
            line-height: 30px;
            padding: 0 20px;
            background: #cbe5fc;
            color: #016daf;
          }

          .line {
            width: calc(100% - 110px);
            height: 14px;
            border-bottom: 1px dashed #cecece;
          }
        }

        .stageInfo {
          padding: 20px;

          .weatherData {
            width: 300px;
            height: 300px;
            overflow-y: auto;

            ::v-deep button {
              width: 100%;
              margin: 10px 0;
              line-height: 20px;
              font-size: 16px;
              display: block;
            }
          }

          .eCharts {
            width: calc(100% - 300px);
            height: 300px;
          }

          .inputGoods {
            width: 200px;
            height: 100px;
            border: 1px solid #d8e7f2;
            border-radius: 4px;
            background: #edf7ff;
            margin-right: 20px;

            .info {
              height: 49px;
              width: 100%;
              text-align: center;
              line-height: 49px;
              color: #016daf;
            }

            .Goodsline {
              width: 180px;
              height: 1px;
              background: #d8e7f2;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-table {
  position: static;
  border-radius: 4px;
}

::v-deep .infinite-list {
  width: 100%;
  max-height: 200px;
}
</style>
